<template>
  <div class="admin-dashboard-container p-5 bg-light-bg-primary dark:bg-dark-bg-primary blue:bg-blue-bg-primary transition-colors duration-300">
    <div class="dashboard-header mb-6">
      <h2 class="text-2xl font-bold text-light-text-primary dark:text-dark-text-primary blue:text-blue-text-primary mb-2">管理员仪表盘</h2>
      <p class="text-light-text-secondary dark:text-dark-text-secondary blue:text-blue-text-secondary">欢迎回来，{{ userName }}</p>
    </div>
    
    <!-- 统计卡片区域 -->
    <div class="stats-cards grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
      <el-card class="stat-card h-32 cursor-pointer hover:shadow-lg transition-all duration-300 bg-light-bg-secondary dark:bg-dark-bg-secondary blue:bg-blue-bg-secondary border-light-border dark:border-dark-border blue:border-blue-border">
        <div class="stat-content flex items-center h-full gap-5">
          <div class="stat-icon w-14 h-14 rounded-full bg-light-bg-primary dark:bg-dark-bg-primary blue:bg-blue-bg-primary flex items-center justify-center text-accent-color">
            <el-icon><Check /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value text-2xl font-bold text-light-text-primary dark:text-dark-text-primary blue:text-blue-text-primary">
              {{ todayVerifications }}
            </div>
            <div class="stat-label text-sm text-light-text-secondary dark:text-dark-text-secondary blue:text-blue-text-secondary">
              今日核验次数
            </div>
          </div>
        </div>
      </el-card>
      
      <el-card class="stat-card h-32 cursor-pointer hover:shadow-lg transition-all duration-300 bg-light-bg-secondary dark:bg-dark-bg-secondary blue:bg-blue-bg-secondary border-light-border dark:border-dark-border blue:border-blue-border">
        <div class="stat-content flex items-center h-full gap-5">
          <div class="stat-icon w-14 h-14 rounded-full bg-light-bg-primary dark:bg-dark-bg-primary blue:bg-blue-bg-primary flex items-center justify-center text-accent-color">
            <el-icon><User /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value text-2xl font-bold text-light-text-primary dark:text-dark-text-primary blue:text-blue-text-primary">
              {{ specialVisitors }}
            </div>
            <div class="stat-label text-sm text-light-text-secondary dark:text-dark-text-secondary blue:text-blue-text-secondary">
              特殊访客数量
            </div>
          </div>
        </div>
      </el-card>
      
      <el-card class="stat-card h-32 cursor-pointer hover:shadow-lg transition-all duration-300 bg-light-bg-secondary dark:bg-dark-bg-secondary blue:bg-blue-bg-secondary border-light-border dark:border-dark-border blue:border-blue-border">
        <div class="stat-content flex items-center h-full gap-5">
          <div class="stat-icon w-14 h-14 rounded-full bg-light-bg-primary dark:bg-dark-bg-primary blue:bg-blue-bg-primary flex items-center justify-center text-accent-color">
            <el-icon><Clock /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value text-2xl font-bold text-light-text-primary dark:text-dark-text-primary blue:text-blue-text-primary">
              {{ pendingApprovals }}
            </div>
            <div class="stat-label text-sm text-light-text-secondary dark:text-dark-text-secondary blue:text-blue-text-secondary">
              待审批访客
            </div>
          </div>
        </div>
      </el-card>
      
      <el-card class="stat-card h-32 cursor-pointer hover:shadow-lg transition-all duration-300 bg-light-bg-secondary dark:bg-dark-bg-secondary blue:bg-blue-bg-secondary border-light-border dark:border-dark-border blue:border-blue-border">
        <div class="stat-content flex items-center h-full gap-5">
          <div class="stat-icon w-14 h-14 rounded-full bg-light-bg-primary dark:bg-dark-bg-primary blue:bg-blue-bg-primary flex items-center justify-center text-accent-color">
            <el-icon><Location /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value text-2xl font-bold text-light-text-primary dark:text-dark-text-primary blue:text-blue-text-primary">
              {{ totalGuardPoints }}
            </div>
            <div class="stat-label text-sm text-light-text-secondary dark:text-dark-text-secondary blue:text-blue-text-secondary">
              门卫点总数
            </div>
          </div>
        </div>
      </el-card>
    </div>
    
    <!-- 图表区域 -->
    <div class="charts-container grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
      <el-card class="chart-card h-96 bg-light-bg-secondary dark:bg-dark-bg-secondary blue:bg-blue-bg-secondary border-light-border dark:border-dark-border blue:border-blue-border">
        <template #header>
          <div class="card-header flex justify-between items-center">
            <span class="text-light-text-primary dark:text-dark-text-primary blue:text-blue-text-primary">核验记录统计 (近7天)</span>
          </div>
        </template>
        <div class="chart-content h-[calc(100%-50px)] flex items-center justify-center">
          <div id="verificationChart" style="width: 100%; height: 300px;"></div>
        </div>
      </el-card>
      
      <el-card class="chart-card h-96 bg-light-bg-secondary dark:bg-dark-bg-secondary blue:bg-blue-bg-secondary border-light-border dark:border-dark-border blue:border-blue-border">
        <template #header>
          <div class="card-header flex justify-between items-center">
            <span class="text-light-text-primary dark:text-dark-text-primary blue:text-blue-text-primary">访客类型分布</span>
          </div>
        </template>
        <div class="chart-content h-[calc(100%-50px)] flex items-center justify-center">
          <div id="visitorTypeChart" style="width: 100%; height: 300px;"></div>
        </div>
      </el-card>
    </div>
    
    <!-- 最近核验记录 -->
    <div class="recent-verifications mb-6">
      <el-card class="bg-light-bg-secondary dark:bg-dark-bg-secondary blue:bg-blue-bg-secondary border-light-border dark:border-dark-border blue:border-blue-border">
        <template #header>
          <div class="card-header flex justify-between items-center">
            <span class="text-light-text-primary dark:text-dark-text-primary blue:text-blue-text-primary">最近核验记录</span>
          </div>
        </template>
        <el-table 
          :data="recentVerifications" 
          style="width: 100%" 
          class="bg-light-bg-secondary dark:bg-dark-bg-secondary blue:bg-blue-bg-secondary text-light-text-primary dark:text-dark-text-primary blue:text-blue-text-primary"
        >
          <el-table-column prop="id" label="记录ID" width="80" />
          <el-table-column prop="visitorName" label="访客姓名" width="120" />
          <el-table-column prop="visitorType" label="访客类型" width="120">
            <template #default="scope">
              <el-tag :type="getVisitorTypeTagType(scope.row.visitorType)">{{ getVisitorTypeText(scope.row.visitorType) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="guardPoint" label="核验点" width="120" />
          <el-table-column prop="verifyResult" label="核验结果" width="100">
            <template #default="scope">
              <el-tag :type="getVerifyResultTagType(scope.row.verifyResult)">{{ getVerifyResultText(scope.row.verifyResult) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="verifyTime" label="核验时间" width="180" />
          <el-table-column prop="guardName" label="核验人" width="100" />
          <el-table-column label="操作" width="120" fixed="right">
            <template #default="scope">
              <el-button 
                type="primary" 
                size="small" 
                @click="viewVerification(scope.row.id)"
                class="bg-accent-color hover:bg-accent-color/90"
              >
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    
    <!-- 功能入口卡片 -->
    <div class="function-cards grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
      <el-card 
        class="function-card h-32 cursor-pointer hover:shadow-lg transition-all duration-300 bg-light-bg-secondary dark:bg-dark-bg-secondary blue:bg-blue-bg-secondary border-light-border dark:border-dark-border blue:border-blue-border"
        @click="navigateTo('key-management')"
      >
        <div class="function-content flex items-center h-full gap-5">
          <div class="function-icon w-14 h-14 rounded-full bg-light-bg-primary dark:bg-dark-bg-primary blue:bg-blue-bg-primary flex items-center justify-center text-accent-color">
            <el-icon><Key /></el-icon>
          </div>
          <div class="function-info">
            <div class="function-title text-lg font-bold text-light-text-primary dark:text-dark-text-primary blue:text-blue-text-primary">
              密钥管理
            </div>
            <div class="function-desc text-sm text-light-text-secondary dark:text-dark-text-secondary blue:text-blue-text-secondary">
              管理访客扫码核验的密钥
            </div>
          </div>
        </div>
      </el-card>
      
      <el-card 
        class="function-card h-32 cursor-pointer hover:shadow-lg transition-all duration-300 bg-light-bg-secondary dark:bg-dark-bg-secondary blue:bg-blue-bg-secondary border-light-border dark:border-dark-border blue:border-blue-border"
        @click="navigateTo('special-visitor')"
      >
        <div class="function-content flex items-center h-full gap-5">
          <div class="function-icon w-14 h-14 rounded-full bg-light-bg-primary dark:bg-dark-bg-primary blue:bg-blue-bg-primary flex items-center justify-center text-accent-color">
            <el-icon><Star /></el-icon>
          </div>
          <div class="function-info">
            <div class="function-title text-lg font-bold text-light-text-primary dark:text-dark-text-primary blue:text-blue-text-primary">
              特殊访客管理
            </div>
            <div class="function-desc text-sm text-light-text-secondary dark:text-dark-text-secondary blue:text-blue-text-secondary">
              管理长期访客和VIP访客
            </div>
          </div>
        </div>
      </el-card>
      
      <el-card 
        class="function-card h-32 cursor-pointer hover:shadow-lg transition-all duration-300 bg-light-bg-secondary dark:bg-dark-bg-secondary blue:bg-blue-bg-secondary border-light-border dark:border-dark-border blue:border-blue-border"
        @click="navigateTo('guard-management')"
      >
        <div class="function-content flex items-center h-full gap-5">
          <div class="function-icon w-14 h-14 rounded-full bg-light-bg-primary dark:bg-dark-bg-primary blue:bg-blue-bg-primary flex items-center justify-center text-accent-color">
            <el-icon><UserFilled /></el-icon>
          </div>
          <div class="function-info">
            <div class="function-title text-lg font-bold text-light-text-primary dark:text-dark-text-primary blue:text-blue-text-primary">
              门卫管理
            </div>
            <div class="function-desc text-sm text-light-text-secondary dark:text-dark-text-secondary blue:text-blue-text-secondary">
              管理门卫账号和权限
            </div>
          </div>
        </div>
      </el-card>
      
      <el-card 
        class="function-card h-32 cursor-pointer hover:shadow-lg transition-all duration-300 bg-light-bg-secondary dark:bg-dark-bg-secondary blue:bg-blue-bg-secondary border-light-border dark:border-dark-border blue:border-blue-border"
        @click="navigateTo('audit-logs')"
      >
        <div class="function-content flex items-center h-full gap-5">
          <div class="function-icon w-14 h-14 rounded-full bg-light-bg-primary dark:bg-dark-bg-primary blue:bg-blue-bg-primary flex items-center justify-center text-accent-color">
            <el-icon><Document /></el-icon>
          </div>
          <div class="function-info">
            <div class="function-title text-lg font-bold text-light-text-primary dark:text-dark-text-primary blue:text-blue-text-primary">
              审计日志
            </div>
            <div class="function-desc text-sm text-light-text-secondary dark:text-dark-text-secondary blue:text-blue-text-secondary">
              查看系统操作和访问记录
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, onUnmounted } from 'vue'
import { useAuthStore } from '../../stores/auth'
import { useThemeStore, type ThemeType } from '../../stores/theme'
import { User, Document, Check, Location, Clock, Star, Key, UserFilled } from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import request from '../../utils/request'

// 获取当前主题
const themeStore = useThemeStore()
const currentTheme = computed(() => themeStore.currentTheme)

// 类型定义
interface UserInfo {
  name?: string;
  role?: string;
  phone?: string;
}

// 使用auth store
const authStore = useAuthStore()

// 用户名
const userName = computed(() => (authStore.userInfo as UserInfo)?.name || '未知用户')

// 统计数据
const todayVerifications = ref(0)
const specialVisitors = ref(0)
const pendingApprovals = ref(0)
const totalGuardPoints = ref(0)

// 类型定义
interface VerificationRecord {
  id: string;
  visitorName: string;
  visitorType: string;
  guardPoint: string;
  verifyResult: string;
  verifyTime: string;
  guardName: string;
}

interface VerificationStat {
  date: string;
  success: number;
  reject: number;
  pending: number;
}

interface VisitorTypeStat {
  type_name: string;
  count: number;
}

// 最近核验记录数据
const recentVerifications = ref<VerificationRecord[]>([])

// 图表数据
const verificationStats = ref<VerificationStat[]>([])
const visitorTypeStats = ref<VisitorTypeStat[]>([])

// 图表实例
let verificationChart: any = null
let visitorTypeChart: any = null

// 加载状态
const loading = ref(false)

// 获取访客类型标签类型
const getVisitorTypeTagType = (visitorType: string): string => {
  const typeMap: Record<string, string> = {
    'business': 'primary',
    'special': 'success',
    'temporary': 'info',
    'vip': 'warning'
  }
  return typeMap[visitorType] || 'info'
}

// 获取访客类型文本
const getVisitorTypeText = (visitorType: string): string => {
  const typeMap: Record<string, string> = {
    'business': '业务访客',
    'special': '特殊访客',
    'temporary': '临时访客',
    'vip': 'VIP访客'
  }
  return typeMap[visitorType] || visitorType
}

// 获取核验结果标签类型
const getVerifyResultTagType = (verifyResult: string): string => {
  const resultMap: Record<string, string> = {
    'success': 'success',
    'reject': 'danger',
    'pending': 'warning'
  }
  return resultMap[verifyResult] || 'info'
}

// 获取核验结果文本
const getVerifyResultText = (verifyResult: string): string => {
  const resultMap: Record<string, string> = {
    'success': '通过',
    'reject': '拒绝',
    'pending': '待审核'
  }
  return resultMap[verifyResult] || verifyResult
}

// 获取主题相关的图表颜色
const getChartColors = () => {
  const theme = currentTheme.value as ThemeType
  const colors = {
    light: {
      success: '#67c23a',
      reject: '#f56c6c',
      pending: '#e6a23c',
      pieColors: ['#409eff', '#67c23a', '#e6a23c', '#f56c6c']
    },
    dark: {
      success: '#95de64',
      reject: '#ff7875',
      pending: '#ffd666',
      pieColors: ['#69b1ff', '#95de64', '#ffd666', '#ff7875']
    },
    blue: {
      success: '#67c23a',
      reject: '#f56c6c',
      pending: '#e6a23c',
      pieColors: ['#2f54eb', '#67c23a', '#e6a23c', '#f56c6c']
    }
  } as const
  return colors[theme] || colors.light
}

// 查看核验记录详情
const viewVerification = (verificationId: string) => {
  // 这里可以跳转到核验记录详情页面或显示详情弹窗
  console.log('查看核验记录:', verificationId)
}

// 导航到功能页面
const navigateTo = (functionName: string) => {
  // 实际项目中应该根据功能名称跳转到对应的路由
  console.log('导航到功能:', functionName)
}

// 初始化核验统计图表
const initVerificationChart = () => {
  const chartDom = document.getElementById('verificationChart')
  if (!chartDom) return
  
  verificationChart = echarts.init(chartDom)
  const colors = getChartColors()
  
  // 准备数据
  const dates = verificationStats.value.map((item: any) => item.date)
  const successData = verificationStats.value.map((item: any) => item.success)
  const rejectData = verificationStats.value.map((item: any) => item.reject)
  const pendingData = verificationStats.value.map((item: any) => item.pending)
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['通过', '拒绝', '待审核'],
      textStyle: {
        color: currentTheme.value === 'dark' ? '#d9d9d9' : '#333'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: dates,
      axisLabel: {
        color: currentTheme.value === 'dark' ? '#d9d9d9' : '#333'
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: currentTheme.value === 'dark' ? '#d9d9d9' : '#333'
      }
    },
    series: [
      {
        name: '通过',
        type: 'bar',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        data: successData,
        itemStyle: {
          color: colors.success
        }
      },
      {
        name: '拒绝',
        type: 'bar',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        data: rejectData,
        itemStyle: {
          color: colors.reject
        }
      },
      {
        name: '待审核',
        type: 'bar',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        data: pendingData,
        itemStyle: {
          color: colors.pending
        }
      }
    ]
  }
  
  verificationChart.setOption(option)
}

// 初始化访客类型分布图表
const initVisitorTypeChart = () => {
  const chartDom = document.getElementById('visitorTypeChart')
  if (!chartDom) return
  
  visitorTypeChart = echarts.init(chartDom)
  const colors = getChartColors()
  
  // 准备数据
  const typeData = visitorTypeStats.value.map((item: any) => ({
    value: item.count,
    name: item.type_name
  }))
  
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center',
      textStyle: {
        color: currentTheme.value === 'dark' ? '#d9d9d9' : '#333'
      }
    },
    series: [
      {
        name: '访客类型',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: currentTheme.value === 'dark' ? '#494949' : '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '16',
            fontWeight: 'bold',
            color: currentTheme.value === 'dark' ? '#d9d9d9' : '#333'
          }
        },
        labelLine: {
          show: false
        },
        data: typeData,
        color: colors.pieColors
      }
    ]
  }
  
  visitorTypeChart.setOption(option)
}

// 窗口大小改变时重新渲染图表
const handleResize = () => {
  verificationChart?.resize()
  visitorTypeChart?.resize()
}

// 提供备用数据
const provideBackupData = () => {
  // 设置默认统计数据
  todayVerifications.value = 128
  specialVisitors.value = 15
  pendingApprovals.value = 7
  totalGuardPoints.value = 8
  
  // 设置默认最近核验记录数据
  recentVerifications.value = [
    { id: 'V001', visitorName: '张明', visitorType: 'business', guardPoint: '前门', verifyResult: 'success', verifyTime: '2025-09-04 08:15', guardName: '李军' },
    { id: 'V002', visitorName: '李晓华', visitorType: 'special', guardPoint: '后门', verifyResult: 'success', verifyTime: '2025-09-04 09:45', guardName: '王强' },
    { id: 'V003', visitorName: '王刚', visitorType: 'temporary', guardPoint: '侧门', verifyResult: 'success', verifyTime: '2025-09-04 10:30', guardName: '赵伟' },
    { id: 'V004', visitorName: '刘洋', visitorType: 'business', guardPoint: '前门', verifyResult: 'reject', verifyTime: '2025-09-04 14:20', guardName: '李军' },
    { id: 'V005', visitorName: '孙红', visitorType: 'special', guardPoint: '后门', verifyResult: 'success', verifyTime: '2025-09-04 16:05', guardName: '王强' }
  ]
  
  // 设置默认图表数据
  verificationStats.value = [
    { date: '8/29', success: 85, reject: 5, pending: 10 },
    { date: '8/30', success: 92, reject: 8, pending: 12 },
    { date: '8/31', success: 88, reject: 6, pending: 14 },
    { date: '9/1', success: 105, reject: 10, pending: 9 },
    { date: '9/2', success: 98, reject: 7, pending: 15 },
    { date: '9/3', success: 112, reject: 12, pending: 10 },
    { date: '9/4', success: 120, reject: 8, pending: 7 }
  ]
  
  visitorTypeStats.value = [
    { type_name: '业务访客', count: 45 },
    { type_name: '临时访客', count: 30 },
    { type_name: '特殊访客', count: 15 },
    { type_name: 'VIP访客', count: 10 }
  ]
}

// 获取仪表盘数据
const fetchDashboardData = async () => {
  try {
    loading.value = true
    
    // 获取统计数据
    const statsData = await request.get('/api/admin/dashboard/stats')
    todayVerifications.value = statsData.todayVerifications || 0
    specialVisitors.value = statsData.specialVisitors || 0
    pendingApprovals.value = statsData.pendingApprovals || 0
    totalGuardPoints.value = statsData.totalGuardPoints || 0
    
    // 获取最近核验记录
    const recordsData = await request.get('/api/admin/dashboard/verifications/recent')
    recentVerifications.value = recordsData || []
    
    // 获取核验统计图表数据
    const verificationStatsData = await request.get('/api/admin/dashboard/verifications/stats/weekly')
    verificationStats.value = verificationStatsData || []
    
    // 获取访客类型统计图表数据
    const visitorTypeData = await request.get('/api/admin/dashboard/visitors/type/stats')
    visitorTypeStats.value = visitorTypeData || []
    
    // 初始化图表
    initVerificationChart()
    initVisitorTypeChart()
  } catch (error) {
    // 记录错误但不在控制台显示详细错误，避免用户困惑
    console.log('API请求不可用，使用本地演示数据')
    
    // 提供备用数据
    provideBackupData()
    
    // 初始化图表 - 确保即使API调用失败，图表也能正确渲染
    initVerificationChart()
    initVisitorTypeChart()
  } finally {
    loading.value = false
  }
}

// 组件挂载时初始化
onMounted(() => {
  // 初始化主题
  themeStore.initTheme()
  
  // 加载数据
  fetchDashboardData()
  
  // 监听窗口大小变化
  window.addEventListener('resize', handleResize)
})

// 组件卸载时清理
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  verificationChart?.dispose()
  visitorTypeChart?.dispose()
})
</script>

<style scoped>
.admin-dashboard-container {
  width: 100%;
  padding: 20px;
  background-color: var(--light-bg-primary);
  min-height: 100vh;
  box-sizing: border-box;
  transition: background-color 0.3s ease;
}

:deep(.dark) .admin-dashboard-container {
  background-color: var(--dark-bg-primary);
}

:deep(.blue) .admin-dashboard-container {
  background-color: var(--blue-bg-primary);
}

.dashboard-header {
  margin-bottom: 24px;
}

.dashboard-header h2 {
  font-size: 24px;
  margin: 0 0 8px 0;
  color: var(--light-text-primary);
  transition: color 0.3s ease;
}

:deep(.dark) .dashboard-header h2 {
  color: var(--dark-text-primary);
}

:deep(.blue) .dashboard-header h2 {
  color: var(--blue-text-primary);
}

.dashboard-header p {
  color: var(--light-text-secondary);
  margin: 0;
  transition: color 0.3s ease;
}

:deep(.dark) .dashboard-header p {
  color: var(--dark-text-secondary);
}

:deep(.blue) .dashboard-header p {
  color: var(--blue-text-secondary);
}

/* 统计卡片 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  height: 120px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 100%;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--light-bg-primary);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: var(--accent-color);
  transition: all 0.3s ease;
}

:deep(.dark) .stat-icon {
  background-color: var(--dark-bg-primary);
}

:deep(.blue) .stat-icon {
  background-color: var(--blue-bg-primary);
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: var(--light-text-primary);
  transition: color 0.3s ease;
}

:deep(.dark) .stat-value {
  color: var(--dark-text-primary);
}

:deep(.blue) .stat-value {
  color: var(--blue-text-primary);
}

.stat-label {
  font-size: 14px;
  color: var(--light-text-secondary);
  margin-top: 4px;
  transition: color 0.3s ease;
}

:deep(.dark) .stat-label {
  color: var(--dark-text-secondary);
}

:deep(.blue) .stat-label {
  color: var(--blue-text-secondary);
}

/* 图表容器 */
.charts-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.chart-card {
  height: 350px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-content {
  height: calc(100% - 50px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 最近核验记录 */
.recent-verifications {
  margin-bottom: 24px;
}

/* 功能入口卡片 */
.function-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.function-card {
  height: 120px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.function-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.function-content {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 100%;
}

.function-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  transition: all 0.3s ease;
}

.function-info {
  flex: 1;
}

.function-title {
  font-size: 18px;
  font-weight: bold;
  transition: color 0.3s ease;
}

.function-desc {
  font-size: 14px;
  margin-top: 4px;
  transition: color 0.3s ease;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .charts-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .stats-cards,
  .function-cards {
    grid-template-columns: 1fr 1fr;
  }
  
  .dashboard-header h2 {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .stats-cards,
  .function-cards {
    grid-template-columns: 1fr;
  }
  
  .chart-card {
    height: 250px;
  }
}

/* 确保所有元素都有过渡效果 */
:deep(.el-card) {
  transition: all 0.3s ease;
}

:deep(.el-table) {
  transition: all 0.3s ease;
}

:deep(.el-table__header-wrapper th) {
  transition: all 0.3s ease;
}

:deep(.el-table__body-wrapper td) {
  transition: all 0.3s ease;
}

:deep(.el-tag) {
  transition: all 0.3s ease;
}

:deep(.el-icon) {
  transition: all 0.3s ease;
}
</style>